<template>
  <div>
    <el-dialog
      :title="form.id ? '角色编辑' : '角色添加'"
      :visible.sync="buffer.isShow"
      @opened="open"
    >
      <el-form :model="form">
        {{ form }}
        <!-- 角色名称 -->
        <el-form-item label="角色名称" :label-width="formLabelWidth">
          <el-input v-model="form.rolename" autocomplete="off"></el-input>
        </el-form-item>
        <!-- 角色权限 -->
        <el-form-item label="角色权限" :label-width="formLabelWidth">
          <el-tree
            :data="menuList"
            show-checkbox
            node-key="id"
            :props="defaultProps"
            ref="tree"
          >
          </el-tree>
        </el-form-item>
        <!-- 角色状态 -->
        <el-form-item label="角色状态" :label-width="formLabelWidth">
          <el-switch
            v-model="form.status"
            active-color="#13ce66"
            inactive-color="#ff4949"
            :active-value="1"
            :inactive-value="2"
          >
          </el-switch>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="buffer.isShow = false">取 消</el-button>
        <el-button type="primary" @click="submit">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
export default {
  props: ["buffer", "menuList"],
  watch: {
    buffer: {
      handler(newV, oldV) {
        //1.7赋空表单数据
        if (!newV.isShow) {
          //监听窗口关闭
          this.form = {
            rolename: "", //角色名称
            menus: "", //角色权限id字符串
            status: 1, //角色状态
          };
          //赋空树形控件
          this.setKeys([]);
        }
      },
      deep: true,
    },
  },
  data() {
    return {
      form: {
        rolename: "", //角色名称
        menus: "", //角色名称
        status: 1, //角色状态 1  2
      },
      defaultProps: {
        children: "children", //树形结构关键词
        label: "title", //指定要展示的权限菜单字段属性名称
      },

      formLabelWidth: "120px",
    };
  },
  mounted() {},
  methods: {
    //1.提交新增角色数据
    submit() {
      //1. 是否只是叶子节点，默认值为 false 2. 是否包含半选节点，默认值为 false
      //1.1通过通过树形控件中的方法获取选中节点上的数据：{id}
      let array = this.$refs.tree.getCheckedNodes(false, true);
      // 1.2组装角色权限数据id字符串赋值给表单对象
      this.form.menus = array.map((item) => item.id).join(",");
      // 1.3执行提交操作
      (this.form.id
        ? this.$api.reqRoleEdit(this.form)
        : this.$api.reqRoleAdd(this.form)
      )
        // this.$api.reqRoleAdd(this.form)
        .then((res) => {
          // console.log(res)
          //1.4关闭弹窗
          this.buffer.isShow = false;
          //1.5提示用户操作成功
          this.$notify({
            title: "成功",
            message: "操作成功",
            type: "success",
          });
          //1.6更新菜单列表数据
          //子传父通过
          //this.$emit ('父亲传递的自定义事件名字','传递的数据')
          this.$emit("channel", "ok");
          //1.7赋空表单
        })
        .catch((err) => console.log(err));
    },
    //2.重置树形组件选中效果
    setKeys(keyArry) {
      this.$refs.tree.setCheckedKeys(keyArry);
    },
    //3.监听弹窗加载完毕
    open() {
      if (this.form.id) {
        //将权限字符串转为数据
        let keyArray = this.form.menus.split(",");
        //   console.log(keyArray)
        // 将权限id数组中的一级菜单权限清除  通过孩子二级菜单权限反推父级选中效果（半选 全选）
        this.menuList.forEach(item=>{
            keyArray.forEach((m,i)=>{
                if(item.id==m && item.children){
                    keyArray.splice(i,1)
                }
            })
        })
        //根据权限id数组 重置默认选中效果
        this.setKeys(keyArray)
      }
    },
  },
};
</script>

<style scoped>
</style>
